<template>
  <div class="wrap">
    <div class="box" v-for="(item,index) in goodsList" :key="index">
      <div class="box_top">
        <div class="left">
          <div class="img">
            <img :src="$store.state.imgurlApi+item.image" alt="">
          </div>
        </div>
        <div class="right">
          <div class="name">{{item.title}}</div>
          <div class="sale">
            <div class="number">销量：{{item.sales}}</div>
            <div class="stock">库存：{{item.sales}}</div>
          </div>
          <div class="time">上架时间：{{item.updatetime}}</div>
          <div class="price">¥{{item.price}}</div>
        </div>
      </div>
      <div class="box_bot">
        <div class="btn" @click="edit(item.id)">
          <p>编辑</p>
          <img src="../../../../static/img/business/edit.png" alt="">
        </div>
        <div class="btn border" @click="up(item.id)">
          <p>上架</p>
          <img src="../../../../static/img/business/up.png" alt="">
        </div>
        <div class="btn" @click="del(item.id)">
          <p>删除</p>
          <img src="../../../../static/img/business/delete.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "no",
    inject:["reload"],
    data() {
      return {
        store_info:{},
        goodsList:[]
      }
    },
    methods:{
      edit(id){
        this.$router.push("/views/Business/addGoods?id="+id)
      },
      up:function (id) {
        this.$myAxios('/store/goods/setStatus', 'post', {
          goods_id:id,
          status:"up"
        }).then(res => {
          if(res.data.code == 1){
            this.$myNotice(res.data.msg,2000);
            this.reload()
          }else{
            this.$myNotice(res.data.msg,2000)
          }
        })
      },
      del:function (id) {
        this.$myAxios('/store/goods/setStatus', 'post', {
          goods_id:id,
          status:"hidden"
        }).then(res => {
          if(res.data.code == 1){
            this.$myNotice(res.data.msg,2000);
            this.reload()
          }else{
            this.$myNotice(res.data.msg,2000)
          }
        })
      }
    },
    mounted() {
      this.present = this.$route.path;
      this.store_info = JSON.parse(localStorage.getItem("storeInfo"));
      this.$myAxios('/store/goods/goods_list', 'get', {
        store_id:this.store_info.id,
        offset:0,
        status:"hidden"
      }).then(res => {
        console.log(res.data);
        this.goodsList = res.data.data.list
      })
    }
  }
</script>

<style scoped>

  .box {
    width: 3.53rem;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 .03rem .15rem 0 rgba(4, 0, 0, 0.15);
    border-radius: .07rem .07rem .07rem .07rem;
    margin: .1rem auto;
    padding:.1rem 0 0;
  }
  .box_top{
    display: flex;
    justify-content: space-between;
    margin: 0 .1rem;
  }
  .left{
    width: 1.1rem;
    margin-right: .1rem;
  }
  .right{
    flex-grow: 1;
  }
  .name{
    font-size: .14rem;
    line-height: .2rem;
    color: #333333;
  }
  .sale{
    display: flex;
    font-size: .12rem;
    color: #999999;
  }
  .number{
    margin-right: .3rem;
  }
  .time{
    font-size: .12rem;
    color: #999999;
  }
  .price{
    color: #FB4448;
    font-size: .18rem;
  }
  .box_bot{
    display: flex;
    margin-top: .12rem;
    padding: .11rem 0;
    border-top: 1px solid rgba(241,241,241,1);
  }
  .btn{
    width: calc(100% / 3);
    text-align: center;
    height: .25rem;
    line-height: .25rem;
    color: #999999;
    font-size: .12rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .btn img{
    width: .12rem;
    height: .12rem;
    margin-left: .08rem;
  }
  .border{
    border-left: 1px solid rgba(241,241,241,1);
    border-right: 1px solid rgba(241,241,241,1);
  }
</style>
